
<div id="main" style="width: 80%;height:80vh;margin: 10px auto;"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
option = {
    title: {
        text: '服务构成统计表',
        left: 'left'
    },
    legend: {},
    tooltip: {
        trigger: 'axis',
        showContent: false
    },
    dataset: {
        source: [
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {gridIndex: 0},
    grid: {top: '55%'},
    series: [
        {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            label: {
                formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
                itemName: 'product',
                value: '2020',
                tooltip: '2020'
            }
        }
    ]
};

myChart.on('updateAxisPointer', function (event) {
    var xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
        var dimension = xAxisInfo.value + 1;
        myChart.setOption({
            series: {
                id: 'pie',
                label: {
                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                    value: dimension,
                    tooltip: dimension
                }
            }
        });
    }
});



layui.use( 'jquery', function(){
        var $ = layui.jquery;
        $(function() {
            $.ajax({
                url : 'http://localhost:8080/serve/getAllServe',
                type: 'get',
                dataType: 'json',
                success: function(data) {
                    let len = data.length;
                    option.dataset.source = data;
                    option.series[0].encode.value = data[0][1];
                    option.series[0].encode.tooltip = data[0][1];
                    for (let i = 0; i < len; i++) {
                        option.series.push({type: 'line', smooth: true, seriesLayoutBy: 'row'});
                    }

                    myChart.setOption(option);
                }
            })
        })
    });
</script>